<template>
  <PageLayout>
    <template #header>
      <BasicForm :options="queryOptions" @ok="onQueryDataByParams"></BasicForm>
    </template>
    <div class="table-box">
      <div class="head-box">
        <div class="title">固件版本更新</div>
        <a-space :size="16">
          <a-button type="primary" @click="add()">新增</a-button>
        </a-space>
      </div>
      <div class="bg-fff">
        <!-- :apiFetch="apiFetch"  -->
        <BasicTable
          ref="tableRef"
          :columns="columns"
          :query-params="queryData"
          :apiFetch="postFirmwarePage"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'action'">
              <a-space class="space-btn--box" :size="10">
                <a class="btn" @click="edit(record)">升级任务</a>
                <a class="btn" @click="remove(record.id)">删除</a>
              </a-space>
            </template>
          </template>
        </BasicTable>
      </div>
    </div>
  </PageLayout>
</template>
<script name="firmware-manage-list" setup>
import {
  postFirmwarePage,
  postFirmwareDelete,
  postUserUpdateStatus,
} from "@/api/common";
import { useStoreCommonEnum } from "@/store";
import { comfirmModal } from "@/hooks/useModal";
import { message } from "ant-design-vue";
const storeCommonEnum = useStoreCommonEnum();
const router = useRouter();
const queryOptions = ref([
  // {
  //   name: "固件名称",
  //   type: "input",
  //   value: "",
  //   placeholder: "请输入",
  //   filed: "name",
  // },
  {
    name: "固件名称",
    type: "select",
    value: undefined,
    placeholder: "请选择",
    filed: "type",
    list: [
      {
        label: "主控板",
        value: 0,
      },
      {
        label: "WiFi模块",
        value: 1,
      },
    ],
  },
]);
const columns = [
  {
    title: "序号",
    dataIndex: "index",
    width: "80px",
    customRender: (record) => `${record.index + 1}`,
  },
  {
    title: "固件名称",
    dataIndex: "type",
    key: "type",
    width: "150px",
    ellipsis: true,
    customRender: ({ record }) => (record.type == 0 ? "主控板" : "WiFi模块"),
  },
  {
    title: "版本名称",
    dataIndex: "name",
    key: "name",
    width: "200px",
    ellipsis: true,
  },
  {
    title: "版本号",
    dataIndex: "version",
    key: "version",
    width: "200px",
    ellipsis: true,
  },
  {
    title: "版本描述",
    dataIndex: "remark",
    key: "remark",
    width: "200px",
    ellipsis: true,
  },
  {
    title: "固件文件",
    dataIndex: "fileName",
    key: "fileName",
    width: "200px",
    ellipsis: true,
  },
  {
    title: "更新时间",
    dataIndex: "updateTime",
    key: "updateTime",
    width: "200px",
    ellipsis: true,
  },
  
  // {
  //   title: "所属级别",
  //   dataIndex: "nickname",
  //   key: "nickname",
  //   width: "150px",
  //   ellipsis: true,
  // },
  // {
  //   title: "所属领导",
  //   dataIndex: "nickname",
  //   key: "nickname",
  //   width: "150px",
  //   ellipsis: true,
  // },

  {
    title: "操作",
    fixed: "right",
    dataIndex: "action",
    key: "action",
    width: 200,
  },
];

const queryData = reactive({});
const tableRef = ref(null);
const onQueryDataByParams = (params) => {
  for (let key in params) {
    queryData[key] = params[key];
  }
  tableRef.value.refreshTableData();
};

const edit = (record) => {
  console.log("record", record);
  router.push({
    path: "/firmware/task/list",
    query: {
      id: record?.id,
      type: record?.type,
    },
  });
};
const add = (record) => {
  router.push({
    path: "/firmware/manage/add",
    query: {
      id: record?.id,
    },
  });
};

const changeStatus = (record) => {
  const title = !record.status ? "禁用" : "启用";
  comfirmModal({
    content: `确认${title}该账号`,
    onOk() {
      postUserUpdateStatus({
        id: record.id,
        status: !record.status,
      }).then(() => {
        message.success(`${title}成功`);
        tableRef.value.fetch();
      });
    },
  });
};
const remove = (id) => {
  comfirmModal({
    content: "确认删除该账号",
    onOk() {
      postFirmwareDelete({ id }).then(() => {
        message.success("删除成功");
        tableRef.value.fetch();
      });
    },
  });
};
</script>

<style lang="less" scoped></style>
